<template>
  <div class="component-upload-image">
    <el-upload
      :action="uploadImgUrl"
      list-type="picture-card"
      accept=".jpg, .png, .jpeg"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :on-error="handleUploadError"
      name="file"
      :file-list="fileList"
      :headers="headers"
      style="display: inline-block; vertical-align: top"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件</div>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </div>
</template>

<script>
import storage from '@/utils/localStorage'

export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      uploadImgUrl: "http://139.196.221.112:8600/system/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + storage.getToken()
      },
    };
  },
  props: {
    fileLists: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleUploadSuccess (res) {
      this.fileList.push({
        url: "http://" + res.data.url
      })
      this.loading.close();
      this.message.success('上传成功')
    },
    handleBeforeUpload () {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError () {
      this.message.error('上传失败')
      this.loading.close();
    },
    handleRemove(file) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fileList = this.fileList.filter(item => item.url !== file.url)
      }).catch((error) => { })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleGetInfo () {
      return this.fileList.map(item => {
        return item.url
      })
    }
  },
  watch: {
    fileLists: {
      handler (nv) {
        this.fileList = nv.map(item => {
          return { url: item }
        })
      },
      immediate: true,
      deep: true
    }
  },
};
</script>

<style scoped lang="scss">
.image {
  position: relative;
  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }
  &:hover .mask {
    opacity: 1;
  }
}
</style>